<template>
  <a-layout class="wrapper h">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo" ></div>
      <v-sidebar></v-sidebar>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
      </a-layout-header>
      <a-layout-content class="content">
        <a-spin class="mainSpin" tip="Loading..." :spinning="mainSpinning">
          <router-view></router-view>
        </a-spin>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
// @ is an alias to /src
import Sidebar from '@/components/Sidebar.vue';
import bus from '@/util/bus';

export default {
  data() {
    return {
      mainSpinning: false,
      collapsed: false,
    };
  },
  components: {
    VSidebar: Sidebar,
  },
  created() {
    bus.$on('spinning', (msg) => {
      this.mainSpinning = msg;
    });
  },
};
</script>

<style scoped>
  .wrapper .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color .3s;
  }

  .wrapper .trigger:hover {
    color: #1890ff;
  }

  .wrapper .logo {
    height: 32px;
    background: rgba(255,255,255,.2);
    margin: 16px;
  }
  .mainSpin{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
  }
  .content{
    position: relative;
    margin: 14px 10px;
    background: #fff;
    min-height: 280px;
    overflow: auto;
  }
</style>
